﻿@using Syncfusion.Blazor.Buttons;

@namespace BlazorDemos.Shared

@inject IJSRuntime JsRuntime;
@inject NavigationManager UriHelper;
@inject SampleService SampleService;

<div id='sample-header' class="sb-header e-view" role="banner">
    <div class='sb-header-left sb-left sb-table'>
        <div class='sb-header-item sb-table-cell'>
            <div id="sb-toggle-left" @onclick="OnToggleClick" @onclick:stopPropagation="true" role="button" tabindex="0" class="sb-slide-nav sb-icons toggle-active sb-icon-hamburger" aria-label="toggle all controls navigation"
                 title='toggle leftpane'></div>
        </div>
        <div class='sb-header-item sb-table-cell' id="sb-header-text" style="padding-left:20px">
            <span>Essential Studio for Blazor </span>
        </div>
    </div>
    <div class='sb-header-right sb-right sb-table'>
        <div class="sb-header-item sb-table-cell">
            <div id="header-theme-switcher" role="button" tabindex="0" title='Change theme of sample browser'>
                <DropDownComponent DataSource="@SampleUtils.ThemeData" DefaultValue="CHOOSE THEME" OnSelect="OnThemeChange">
                    <ItemTemplate>
                        @if (currentTheme == context.ID)
                        {
                            <span class="sb-icons sf-theme-selection-icon"></span>
                        }
                        <span>@context.Text</span>
                    </ItemTemplate>
                </DropDownComponent>
            </div>
        </div>

        <div class='sb-header-item sb-table-cell sb-search-container'>
            <div class="@searchClass" role="button" tabindex="0" aria-label="toggle sample search" title="Toggle sample search" @onclick="@OnSearchRender">
                <span class="sb-settings sb-icons sb-icon-search"></span>
            </div>
        </div>

        <div class='sb-header-item sb-table-cell sb-settings-container'>
            <div class='@preferenceClass' role="button" tabindex="0" aria-label="toggle settings menu" title="Toggle sample browser preferences" @onclick="@OnPreferenceClick">
                <span class='sb-settings sb-icons sb-icon-settings-preferences'></span>
            </div>
            <Preferences @ref="@preferenceRef"></Preferences>
        </div>

        <div class='sb-header-item sb-table-cell sb-download-container'>
            <a href='https://github.com/syncfusion/blazor-samples' target="_blank" rel="noopener">
                <button id='github' class='sb-github-btn'>
                    <div class="sb-icons github-logo" title="Explore in Github"></div>
                </button>
            </a>
        </div>
        <div class="sb-header-splitter sb-download-splitter"></div>
        <div class='sb-header-item sb-table-cell sb-download-container'>
            <a href='https://www.syncfusion.com/downloads/blazor/' target="_blank" rel="noopener">
                <button id='download-now' class='sb-download-btn'>
                    <span class='sb-download-text'>FREE TRIAL</span>
                </button>
            </a>
        </div>
        <div class="sb-header-item sb-table-cell sb-header-settings sb-icons" @onclick="@OnRightToggleClick" @onclick:stopPropagation="true" role="button"></div>
    </div>
</div>

@code {
    private string searchClass { get; set; }
    private string currentTheme { get; set; }
    private string preferenceClass { get; set; }
    private bool isPreferenceClicked { get; set; }
    private Preferences preferenceRef { get; set; }

    /// <summary>
    /// Triggers event callback on left toggle button action.
    /// </summary>
    [Parameter]
    public EventCallback OnToggleClick { get; set; }

    [CascadingParameter]
    protected MainLayout Layout { get; set; }

    /// <summary>
    /// Triggers event callback on right toggle button action in device rendering.
    /// </summary>
    [Parameter]
    public EventCallback OnRightToggleClick { get; set; }

    // Theme switcher change handler
    private void OnThemeChange(DropDownData args)
    {
        var currentTheme = SampleUtils.GetThemeName(UriHelper.Uri);
        if (currentTheme != args.ID)
        {
            var url = SampleUtils.GetThemeUrl(UriHelper.Uri.TrimEnd('/'), args.ID);
            UriHelper.NavigateTo(url, true);
        }
    }

    // Search icon click handler.
    private async Task OnSearchRender()
    {
        await Layout.ShowSearchLayout(true);
    }

    // Preferences icon click handler.
    private void OnPreferenceClick()
    {
        isPreferenceClicked = true;
        var isActive = preferenceClass.Contains(SampleUtils.ACTIVE_CLASS);
        if (isActive)
        {
            preferenceClass = SampleUtils.RemoveClass(preferenceClass, SampleUtils.ACTIVE_CLASS);
        }
        else
        {
            preferenceClass = SampleUtils.AddClass(preferenceClass, SampleUtils.ACTIVE_CLASS);
        }
        preferenceRef.ShowPopup(!isActive);
    }

    /// <summary>
    /// Hides the preferences popup element.
    /// </summary>
    public void HidePreferences()
    {
        if (!isPreferenceClicked && !preferenceRef.IsPopupClicked())
        {
            preferenceClass = SampleUtils.RemoveClass(preferenceClass, SampleUtils.ACTIVE_CLASS);
            preferenceRef.ShowPopup(false);
            StateHasChanged();
        }
        isPreferenceClicked = false;
    }

    protected override void OnInitialized()
    {
        base.OnInitialized();
        currentTheme = SampleUtils.GetThemeName(UriHelper.Uri);
        searchClass = SampleUtils.HEADER_SEARCH_CLASS;
        preferenceClass = SampleUtils.HEADER_PREFERENCES_CLASS;
    }
}
